import React, { useState } from "react";
import "./TodoHeader.css";
import { toast } from "react-toastify";

export default function TodoHeader(props) {
  let { addTodo } = props;
  //声明一个状态
  let [v, setV] = useState("");
  //绑定input元素的 keyup 事件
  let keyup = async (e) => {
    //判断用户按下的是否为回车键
    if (e.code === "Enter") {
      try {
        //新增任务了
        await addTodo(v);
        //清空文本框
        setV("");
        //温馨提示
        toast.success("🤣添加成功", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
      } catch (e) {
        console.log(e);
      }
    }
  };
  return (
    <div className="todo-header">
      <input
        onKeyUp={keyup}
        type="text"
        value={v}
        onChange={(e) => setV(e.target.value)}
        placeholder="请输入你的任务名称，按回车键确认"
      />
    </div>
  );
}
